<template>
    <div class="header">
        <Collapse :bordered="true" :defaultActiveKey="['1']">
            <CollapsePanel :header="title ? title +  ' / 搜索条件' : '搜索条件'" key="1">
                <div class="box">
                    <div class="item" v-for="(item, index) in items" :key="index">
                        <span>{{item.label}}：</span>
                        <Input
                                :placeholder="item.placeholder ? item.placeholder : '请输入'"
                                v-if="item.type === 'input'" :value="model[item.key]"
                                @change="setValue($event.target.value, item.key)"
                                :maxlength="item.maxLength ? item.maxLength : 200"
                                @keyup.enter="load"
                        />
                        <Select :placeholder="item.placeholder ? item.placeholder : '请选择'"
                                v-if="item.type === 'select'" :value="model[item.key]"
                                @change="setValue($event, item.key)"
                                @keyup.enter="load">
                            <SelectOption value="">全部</SelectOption>
                            <SelectOption v-for="(child, childIndex) in item.data" :key="childIndex" :value="child.value">
                                {{child.label}}
                            </SelectOption>
                        </Select>
                        <DatePicker
                                v-if="item.type === 'datePicker'"
                                :placeholder="item.placeholder ? item.placeholder : '请选择日期'"
                                :value="model[key]"
                                :picker="item.picker ? item.picker : ''"
                                @change="setValue($event, item.key)"
                                :format="item.format ? item.format : 'YYYY-MM-DD'"
                                @keyup.enter="load"
                        />
                        <RangePicker
                                v-if="item.type === 'rangePicker'"
                                :placeholder="item.placeholder ? item.placeholder : ['开始时间', '结束时间']"
                                :value="model[key]"
                                :show-time="item.showTime ? item.showTime : false"
                                :picker="item.picker ? item.picker : ''"
                                @change="setValue($event, item.key)"
                                :format="item.format ? item.format : 'YYYY-MM-DD'"
                                @keyup.enter="load"
                        />
                    </div>
                    <div class="item">
                        <Button class="button" @click="load">
                            <span><span class="icon iconfont icon-sousuo"></span></span>
                            <span>搜索</span>
                        </Button>
                    </div>
                </div>
            </CollapsePanel>
        </Collapse>
    </div>
</template>
<script>
    import {
        Select,
        SelectOption,
        Button,
        Input,
        Collapse,
        CollapsePanel,
        DatePicker,
        RangePicker
    } from "ant-design-vue";
    export default {
        name: 'filter',
        props: {
          items: {
              type: Array,
              default: []
          },
          model: {
              type: Object,
              default: {}
          },
          title: {
              type: String,
              default: ''
          }
        },
        components: {
            Collapse,
            CollapsePanel,
            Select,
            SelectOption,
            Button,
            Input,
            DatePicker,
            RangePicker
        },
        data(){
            return{

            }
        },
        mounted(){

        },
        methods: {

            setValue(val, key){
                this.model[key] = val;
                console.log(this.model)
            },

            load(){
                this.$parent.load();
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
